<template>
  <view class="shop_container app_container_page">
    <van-search class="search" :value="searchValue" @change="searchChange" placeholder="请输入商家名称" use-action-slot @search="onSearch" background="#ffff62">
      <view slot="action" @click="searchClick" class="searchBtn">搜索</view>
    </van-search>
    <view class="shopListContent">
      <pullRefreshView class="pullRefreshShopView" ref="pullRefreshShopView" :fetchFn="fetchShopList">
        <template v-slot:default="{ list }">
          <appShopCard v-for="store in list" :key="store.id" :store="store" @SHOP_CARD_CLICK="toShopDetail" class="shopCard"></appShopCard>
        </template>
      </pullRefreshView>
    </view>
  </view>
</template>

<script>
import pullRefreshView from '@/components/app/pull-refresh-view.vue'
import appShopCard from '@/components/app/app_shop_card.vue'
import { getstoreList } from '@/api/home'
export default {
  components: {
    pullRefreshView,
    appShopCard
  },
  data() {
    return {
      searchValue: ''
    }
  },
  methods: {
    fetchShopList(params) {
      return getstoreList({
        ...params,
        storeName: this.$parent.searchValue,
        province: '',
        city: '',
        // city: this.$store.state.activeAddress.cityName ? this.$store.state.activeAddress.cityName + '市' : '',
        district: ''
      })
    },
    searchChange(e) {
      this.searchValue = e.detail
    },
    onSearch(e) {
      this.searchValue = e.detail
      this.$refs.pullRefreshShopView.fetchList(true).then(() => {
        uni.stopPullDownRefresh()
      })
    },
    searchClick() {
      this.$refs.pullRefreshShopView.fetchList(true).then(() => {
        uni.stopPullDownRefresh()
      })
    },

    toShopDetail(val) {
      uni.navigateTo({
        url: '/pages/shop/shopDetail?id=' + val.id
      })
    }
  },
  onPullDownRefresh() {
    this.$refs.pullRefreshShopView.fetchList(true).then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    this.$refs.pullRefreshShopView.fetchList()
  }
}
</script>

<style lang="scss">
.shop_container {
  .search {
    width: 100%;
    height: 100rpx;
    .van-search__content {
      background: $theme-color !important;
      padding: 20rpx;
    }

    .van-search--withaction {
      padding: 0;
    }

    .van-search__field {
      background: #ffffff;
      border-radius: 30rpx;
      padding: 0 24rpx;
    }

    .van-search__action {
      background: $theme-color;
    }
    .searchBtn {
      font-size: 38rpx;
      color: #000000;
      margin-right: 7px;
    }
  }
  .shopListContent {
    padding: 30rpx 30rpx 0 30rpx;
  }
  app-shop-card ~ app-shop-card {
    margin-top: 30rpx;
  }
}
</style>
